<template>
  <div class="image-slider-container" :class="{ vertical: true }">
    <div class="slice-info">
      <slot name="label">
        {{ localValue + 1 }}/{{ max + 1 }}
      </slot>
    </div>
    <el-slider
      v-model="localValue"
      :min="min"
      :max="max"
      :step="step || 1"
      vertical
      height="220px"
      @input="$emit('input', localValue)"
      @change="$emit('change', localValue)">
    </el-slider>
  </div>
</template>

<script>
export default {
  name: 'ImageSlider',
  props: {
    value: {
      type: Number,
      required: true
    },
    min: {
      type: Number,
      default: 0
    },
    max: {
      type: Number,
      required: true
    },
    step: {
      type: Number,
      default: 1
    },
    orientation: {
      type: String,
      default: 'vertical'
    }
  },
  computed: {
    localValue: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('input', val);
      }
    }
  },
  mounted() {
    // 监听布局变化事件
    window.addEventListener('layout-changed', this.adjustPosition);
    // 窗口大小变化时调整位置
    window.addEventListener('resize', this.adjustPosition);
    // 初始定位
    this.$nextTick(this.adjustPosition);
  },
  beforeDestroy() {
    // 移除事件监听
    window.removeEventListener('layout-changed', this.adjustPosition);
    window.removeEventListener('resize', this.adjustPosition);
  },
  methods: {
    // 调整滚动条位置，确保在视口内可见
    adjustPosition() {
      this.$nextTick(() => {
        // 获取滚动条容器
        const container = this.$el;
        if (!container) return;
        
        // 获取父容器的边界
        const parentRect = container.parentElement?.getBoundingClientRect();
        if (!parentRect) return;
        
        // 确保滚动条在可见区域内
        const leftMargin = parseInt(window.getComputedStyle(container.parentElement).marginLeft, 10) || 0;
        // 向左偏移15px，并加上父容器的左边距
        container.style.left = `${leftMargin + 15}px`;
      });
    }
  }
}
</script>

<style scoped>
@import '../styles/variables.css';

.image-slider-container {
  position: absolute;
  width: 28px;
  height: 260px;
  padding: 6px 2px;
  border-radius: 6px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  background-color: rgba(35, 40, 48, 0.7);
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  border: none;
  transition: all 0.25s ease;
  top: 50%;
  transform: translateY(-50%);
  left: 15px;
  opacity: 0.6;
}

.image-slider-container:hover {
  opacity: 1;
  background-color: rgba(40, 44, 52, 0.9);
  width: 32px;
}

.slice-info {
  color: #ffffff;
  font-size: 11px;
  margin-bottom: 4px;
  padding: 3px 4px;
  background-color: rgba(0, 0, 0, 0.4);
  border-radius: 3px;
  text-align: center;
  white-space: nowrap;
}

.image-slider-container.vertical .el-slider {
  margin: 0;
  height: 100%;
  width: 18px;
}

.image-slider-container.vertical .el-slider__runway {
  width: 2px;
  background-color: rgba(255, 255, 255, 0.25);
}

.image-slider-container.vertical .el-slider__bar {
  width: 3px;
  background-color: #409EFF;
}

.image-slider-container.vertical .el-slider__button {
  width: 8px;
  height: 8px;
  border: 2px solid #409EFF;
  background-color: #ffffff;
  transform: translateX(-3px);
  transition: transform 0.2s ease;
}

.image-slider-container.vertical .el-slider__button:hover {
  transform: translateX(-3px) scale(1.2);
  box-shadow: 0 0 4px rgba(64, 158, 255, 0.6);
}

.image-slider-container.vertical .el-slider__button:active {
  transform: translateX(-3px) scale(1.3);
}

/* 隐藏tooltip，避免它扩展宽度 */
.image-slider-container.vertical .el-tooltip {
  display: none;
}

/* 滑块轨道上的刻度样式 */
.image-slider-container.vertical .el-slider__stop {
  width: 4px;
  height: 1px;
  background-color: rgba(255, 255, 255, 0.3);
  transform: translateX(-1px);
}
</style>
